<template>
    <div class="goodsInfoContainer">
        <!-- 轮播图区域 -->
        <div class="mui-card">
            <div class="mui-card-content carousel">
                <carousel :carouselList="carouselList" :isFull="false"></carousel>
            </div>
        </div>

        <!-- 商品购买区域 -->
        <div class="mui-card">
            <!--页眉，放置标题-->
            <div class="mui-card-header">{{ goodsInfo.title }}</div>
            <!--内容区-->
            <div class="mui-card-content">
                <p class="price">
                    <!-- 市场价 -->
                    市场价：<span class="market">￥{{ goodsInfo.market_price }}</span>
                    <!-- 销售价 -->
                    销售价：<span class="sell">￥{{ goodsInfo.sell_price }}</span>
                </p>
                <p class="shopCount">
                    购买数量：
                    <number-box :max="goodsInfo.stock_quantity"
                                @getCount="getCount"
                    ></number-box>
                </p>
                <!-- 按钮盒子 -->
                <div class="btnWra">
                    <mt-button type="primary">立即购买</mt-button>
                    <mt-button type="danger" @click="getShopCar(goodsInfo.sell_price)">加入购物车</mt-button>
                </div>
            </div>
        </div>

        <!-- 商品信息区域 -->
        <div class="mui-card">
            <!--页眉，放置标题-->
            <div class="mui-card-header">商品参数</div>
            <!--内容区-->
            <div class="mui-card-content">
                <p>商品货号：{{ goodsInfo.goods_no }}</p>
                <p>库存情况：{{ goodsInfo.stock_quantity }}</p>
                <p>上架时间：{{ goodsInfo.add_time | timeFormat }}</p>
            </div>
            <!--页脚，放置补充信息或支持的操作-->
            <div class="mui-card-footer">
                <mt-button type="primary" size="large" plain @click="toPhotoDesc(goodsInfo.id)">图文介绍</mt-button>
                <mt-button type="danger" size="large" plain @click="toShopCarComment(goodsInfo.id)">商品评论</mt-button>
            </div>
        </div>
    </div>
</template>

<script>
    // 引入轮播图组件
    import carousel from '../subComponents/carouselComponent.vue'
    // 引入 商品购买 的 number box 组件
    import numberBox from '../subComponents/goosButtonComponent.vue'

    export default {
        data() {
          return {
              // id 号
              id: parseInt(this.$route.params.id),
              // 轮播图 列表
              carouselList: [],
              // 商品信息
              goodsInfo: [],
              // 子组件 传过来的 值
              son2count: 1
          }
        },
        created() {
            // 开始获取 轮播图组件
            this.getCarouselList()
            // 开始 获取 商品 详情
            this.getGoodsDesc()
        },
        methods: {
            // 获取轮播图组件
            getCarouselList() {
                this.$http.get(`api/getthumimages/${ this.id }`)
                    .then(function (data) {
                        // 判断是否 获取成功 获取失败 提示 退出
                        var data = data.body
                        if (data.status !== 0) {
                            return this.$store.commit('ToastInfo', { msg: '数据获取失败' })
                        }
                        // success
                        // 又因为 数据中 没有 img 属性 我们要 手动添加一个 img 属性
                        data.message.forEach(item => {
                            item.img = item.src
                        })
                        this.carouselList = data.message
                    }, function () {
                        return this.$store.commit('ToastInfo', { msg: 'Server error 500', pos: 'middle' })
                    })
            },
            // 获取商品详情
            getGoodsDesc() {
                this.$http.get(`api/goods/getinfo/${ this.id }`)
                    .then(function (data) {
                        // 判断是否 获取成功 获取失败 提示 退出
                        var data = data.body
                        if (data.status !== 0) {
                            return this.$store.commit('ToastInfo', { msg: '数据获取失败' })
                        }
                        // success
                        this.goodsInfo = data.message[0]
                        console.log(this.goodsInfo, '商品详情')
                    }, function () {
                        return this.$store.commit('ToastInfo', { msg: 'Server error 500', pos: 'middle' })
                    })
            },
            // 获取子组件的 Count
            getCount(value) {
                // 把传过来的值 给 保存起来
                this.son2count = parseInt(value)
            },
            // 加入购物车
            getShopCar(price) {
                // 以 { id: id: count, price: price selected: true } 的形式传到 vuex 中
                let order = { id: this.id, price: price, count: this.son2count, selected: true }
                this.$store.commit('addOrder', order)
            },
            // 去图文介绍
            toPhotoDesc(id) {
                console.log('去图文介绍')
                this.$router.push({ name: 'goodsDesc', params:{ id: id } })
            },
            // 去商品评论
            toShopCarComment(id) {
                this.$router.push({ name: 'goodsComment', params:{ id: id } })
                console.log('去商品评论')
            },
        },
        // 组件
        components: {
            // 轮播图组件
            carousel,
            // number box  组件
            numberBox
        }
    }
</script>

<style scoped lang="less">

    .goodsInfoContainer {
        background-color: #eee;
        overflow: hidden;
        .mui-card {
            padding: 0 10px;
            /*卡片头部区域*/
            .mui-card-header {
                padding-left: 0;
            }
            /*卡片中部区域*/
            .mui-card-content.carousel {
                padding: 15px;
            }
            .mui-card-content {
              min-height: 100px;
              p {
                  padding: 8px 0;
                  margin: 0;
              }
              .price {
                  .market {
                      text-decoration: line-through;
                      padding-right: 5px;
                  }
                  .sell {
                      color: red;
                      font-size: 16px;
                      font-weight: bold;
                  }
              }
              .btnWra {
                  padding: 10px 0;
                  margin-bottom: 5px;
                  button {
                      height: 33px;
                      font-size: 14px;
                  }
              }
            }
            /*卡片底部区域*/
            .mui-card-footer {
                padding: 10px 0;
                display: block;
                button {
                    margin: 10px 0;
                }
            }
        }
    }
</style>